<template>
  <div>
    <!-- 背景图，后面再决定是否 添加 -->
    <div class="background">
      <img :src="imgSrc" width="100%" height="100%" alt="" />
    </div>
    <div class="main">
      <div>
        <h1>欢迎注册虎牙直播大数据分析平台账号</h1>
      </div>
      <div>
        <el-form ref="form" class="form-input" label-width="80px">
          <el-form-item label="昵称">
            <el-input
              v-model="t_user.name"
              placeholder="请输入昵称"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item label="手机号" style="margin-bottom: 0px">
            <el-input
              v-model="t_user.phone"
              placeholder="请输入手机号"
              clearable
              @blur="tel"
            ></el-input>
          </el-form-item>
          <div>
            <font style="color: #fa5151">{{ messageA }} </font>
          </div>
          <el-form-item
            label="邮箱"
            style="margin-bottom: 0px; margin-top: 22px"
          >
            <el-input
              v-model="t_user.email"
              placeholder="请输入邮箱"
              clearable
              @blur="email"
            ></el-input>
          </el-form-item>
          <div>
            <font style="color: #fa5151">{{ messageB }} </font>
          </div>
          <el-form-item label="密码" style="margin-top: 22px">
            <el-input
              v-model="t_user.password"
              placeholder="请输入密码"
              show-password
            ></el-input>
          </el-form-item>
          <el-form-item label="确认密码">
            <el-input
              v-model="pwd"
              placeholder="请再次输入密码"
              show-password
            ></el-input>
          </el-form-item>
        </el-form>
      </div>
      <div>
        <el-button @click="goto()">返回登录</el-button>
        <el-button @click="register()">确定注册</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import stores from "@/store";
export default {
  data() {
    return {
      messageA: "", //手机号错误信息
      messageB: "", //邮箱错误信息
      // ruleFlag:0,//手机号或者邮箱出问题时为1
      ruleTel: 0, //手机号出问题为1
      ruleEmail: 0, //邮箱出问题为1
      imgSrc: require("../../assets/bgc.jpg"),
      state: 0,
      pwd: "", //确认密码
      t_user: {
        id: "",
        name: "",
        phone: "",
        email: "",
        password: "",
      },
    };
  },
  methods: {
    register() {
      if (this.t_user.name == "") {
        //alert("账号不能为空");
        this.$alert("还不知道怎么称呼你呢？", "提示", {
          confirmButtonText: "确定",
        });
      }
      //手机号或者邮箱不正确
      else if (this.ruleTel == 1) {
        this.$alert("请输入正确的手机号", { confirmButtonText: "确定" });
      } else if (this.ruleEmail == 1) {
        this.$alert("请输入正确的邮箱", { confirmButtonText: "确定" });
      } else if (this.t_user.email == "") {
        this.$alert("请填写您的邮箱", { confirmButtonText: "确定" });
      } else if (this.t_user.phone == "") {
        this.$alert("请填写您的手机号", { confirmButtonText: "确定" });
      } else if (this.pwd == "") {
        this.$alert("请输入密码", { confirmButtonText: "确定" });
      } else if (this.pwd != this.t_user.password) {
        this.$alert("两次密码不一致，请检查", { confirmButtonText: "确定" });
      } else {
        console.log(this.user);
        this.$axios
          .post(stores.spring_url + "/register", this.t_user)
          .then((res) => {
            console.log(res.data);
            //注册成功就返回登录页面
            if (res.data.code == 2001) {
              this.$alert("注册成功", { confirmButtonText: "确定" });
              this.$router.push("/login");
            } else if (res.data.code == 3001) {
              this.$alert("该昵称已存在，请重新输入", {
                confirmButtonText: "确定",
              });
            } else if (res.data.code == 4001) {
              this.$alert("该手机号已存在，请重新输入", {
                confirmButtonText: "确定",
              });
            } else if (res.data.code == 5001) {
              this.$alert("该邮箱已存在，请重新输入", {
                confirmButtonText: "确定",
              });
            }
          });
      }
    },
    goto() {
      this.$router.push("/login");
    },
    cpmpare(e) {
      if (this.pwd == this.user.pwd) {
        this.state = 1;
      } else {
        this.state = 0;
        this.$alert("两次密码不一致", { confirmButtonText: "确定" });
      }
      console.log(this.state);
      console.log(e);
    },
    tel() {
      var verify1 = /^1[3456789]\d{9}$/; //手机号
      if (verify1.test(this.t_user.phone) || this.t_user.phone == "") {
        this.messageA = "";
        this.ruleTel = 0;
      } else {
        this.messageA = "请输入正确手机号";
        this.ruleTel = 1;
      }
    },
    email() {
      var verify = /^\w[-\w.+]*@([A-Za-z0-9][-A-Za-z0-9]+\.)+[A-Za-z]{2,14}/; //邮箱
      if (verify.test(this.t_user.email) || this.t_user.email == "") {
        this.messageB = "";
        this.ruleEmail = 0;
      } else {
        this.messageB = "请输入正确邮箱";
        this.ruleEmail = 1;
      }
    },
  },
};
</script>
<style scoped>
.form-input {
  width: 20%;
  margin: auto;
}
.background {
  width: 100%;
  height: 100%; /**宽高100%是为了图片铺满屏幕 */
  z-index: -1;
  position: absolute;
}
/* 登录那玩意居中 */
.main {
  text-align: center; /*让div内部文字居中*/
  border-radius: 20px;
  height: 350px;
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
</style>